<template>
	<view class="policy-config-layout">
		<!-- 产品政策信息 -->
		<view class="policy-config-header">
			<view class="policy-config-header-item">
				<text>政策编号</text>
				<text>{{jsonData.policyId}}</text>
				<view class="line"></view>
			</view>
			<view class="policy-config-header-item">
				<text>产品政策</text>
				<text>{{jsonData.policyName}}</text>
				<view class="line"></view>
			</view>
			<view class="policy-config-header-item" v-if="descList.length > 0"  @tap="showPolicyDesc">
				<text>政策说明</text>
				<view class="policy-config-header-item-right">
					<text>查看说明</text>
					<xh-icon icon="icon_jiantou"></xh-icon>
				</view>
			</view>
		</view>
		<!-- 配置菜单 -->
		<view class="policy-config-menu">
			<uv-tabs :list="menuList" :activeStyle="{color:'#5F56EF',fontSize:'32rpx'}" :inactiveStyle="{color:'#666666',fontSize:'32rpx'}" :itemStyle="{height:'80rpx',padding:'0 30rpx'}" lineColor="#5F56EF" @click="selectItem"></uv-tabs>
		</view>
		<!-- 配置内容 -->
		<view class="policy-config-container">
			<!-- 政策配置 -->
			<xh-policy-config-form v-if="selectType == 1" :agentId="props.agentId" :policyId="jsonData.policyId" :produceId="jsonData.produceId"></xh-policy-config-form>
			<!-- 活动配置 -->
			<xh-activity-config-list v-if="selectType == 2" :agentId="props.agentId" :policyId="jsonData.policyId"></xh-activity-config-list>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import XhPolicyConfigForm from './widget/xh-policy-config-form.vue'
	import XhActivityConfigList from './widget/xh-activity-config-list.vue'
	
	const props = defineProps(['data','agentId'])
	const jsonData = JSON.parse(decodeURIComponent(props.data || '{}'))
	const selectType = ref(1)
	const menuList = ref([{
		name: '结算成本',
		type: 1
	}, {
		name: '活动配置',
		type: 2
	}])
	// 说明
	const descList = ref([])
	const selectItem = (item)=>{
		selectType.value = item.type
	}
	// 查看政策说明
	const showPolicyDesc = ()=>{
		const data = encodeURIComponent(JSON.stringify(descList.value))
		uni.navigateTo({
			url:`/pages/home/agent-manager/agent-info/policy-list/policy-config/policy-config-desc/policy-config-desc?data=${data}`
		})
	}
	onLoad(()=>{
		descList.value = JSON.parse(jsonData.descriptions || '[]')
	})
</script>

<style lang="scss" scoped>
	.policy-config-layout {
		.policy-config-header {
			background-color: #fff;

			.policy-config-header-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				position: relative;

				.policy-config-header-item-right {
					color: $xh-red-color;
				}
			}
		}
		.policy-config-menu{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
		}
		.policy-config-container{
			padding: 0 30rpx;
		}
	}
</style>